<template>
  <div>
    <!-- 历史搜索 -->
    <div class="bg history" v-show="valueList.length > 0">
      <div class="history_top">
        <span>历史搜索</span>
        <van-icon name="delete-o" @click="handlerDelete" />
      </div>
      <div class="tag">
        <!-- tag -->
        <van-row type="flex">
          <van-col v-for="(item, index) in valueList" :key="index">
            <van-tag
              class="tag"
              plain
              size="large"
              type="primary"
              color="#999"
              text-color="#333"
              @click="goSearchItem(item, 1)"
              >{{ item }}</van-tag
            ></van-col
          >
        </van-row>
      </div>
    </div>
    <!-- 热门搜索 -->
    <div class="bg hot" v-show="searchInfoList">
      <div class="history_top">
        <span>热门搜索</span>
      </div>
      <div class="tag">
        <!-- tag -->
        <van-row type="flex">
          <van-col v-for="(item, index) in searchInfoList" :key="index">
            <van-tag
              class="tag"
              plain
              size="large"
              type="primary"
              color="#999"
              text-color="#333"
              @click="goSearchItem(item.keyword, 2)"
              >{{ item.keyword }}</van-tag
            ></van-col
          >
        </van-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SearchNav",
  props: ["searchInfoList", "valueList"],
  data() {
    return {
      searchDetailList: {
        keyword: "",
        sortType: 0,
        descSorted: false,
        categoryId: 0,

        needPopWindow: true,
        searchWordSource: 7,
        stillSearch: false,
        _stat_search: "",
        itemId: 0,
        size: 40,
        upperPrice: -1,
        floorPrice: -1,
        matchType: 0,
      }, //搜索参数。14个kv
    };
  },

  methods: {
    handlerDelete() {
      localStorage.removeItem("SEARCH_HISTORY");
      this.$emit("reset", []);
    },
    goSearchItem(item, tag) {
      let keyword = item;
      if (tag == 1) {
        this.$router.push({
          query: { _stat_search: "history", keyword },
        });
        // 先把vuex数据清理了
        this.$store.dispatch("search/resetSearchDetail");
        // 存keyword 和stat_search
        this.searchDetailList.stat_search = "history";
        this.searchDetailList.keyword = keyword;
        this.$store.dispatch("search/getSearchDetail", this.searchDetailList);
      } else {
        this.$router.push({
          query: { _stat_search: "hot", keyword },
        });
        // 存keyword 和stat_search
        this.searchDetailList.stat_search = "hot";
        this.searchDetailList.keyword = keyword;
        this.$store.dispatch("search/getSearchDetail", this.searchDetailList);
      }

      // 是否显示搜索详情

      this.$emit("changeFlag", { tag: 3, keyword });
    },
  },
};
</script>

<style lang="less" scoped>
.bg {
  background-color: white;
  padding: 10px;
}
.history {
  margin-bottom: 10px;
}
.history_top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  line-height: 14px;
  height: 45px;
}

.van-tag {
  margin-right: 0.32rem;
  font-size: 0.24rem;
  margin-bottom: 0.32rem;
}

.van-col {
  font-size: 0.24rem;
}
.van-icon {
  width: 0.54rem;
  height: 0.54rem;
}
</style>
